<template>
<transition name="fade">
  <div class="box">
    <div class="friend-header">
      <router-link to="/time" tag="i" class="iconfont icon-fanhui"></router-link>
      <h2>亲友团</h2>
      <span>邀请</span>
    </div>
    <div class="friend-content">
      <div class="dad">
        <img src="./../../assets/baike1.jpg" alt="">
        <p>爸爸</p>
        <span>最近：11-12 08:10</span>
      </div>
      <div class="mom">
        <img src="./../../assets/baike2.jpg" alt="">
        <p>妈妈</p>
        <span>最近：11-12 08:10</span>
      </div>
      <div class="family">
        <ul>
          <li>+ 外婆</li>
          <li>+ 奶奶</li>
          <li>+ 姥姥</li>
          <li>+ 姥爷</li>
          <li>+ 爷爷</li>
          <li>+ 外公</li>
          <li>+ 小姨</li>
          <li>+ 姑姑</li>
        </ul>
      </div>
    </div>
  </div>
</transition>
</template>

<style lang="scss">
@import '@/lib/reset.scss';
.friend-header {
  @include rect(100%, 0.42rem);
  background: #f8eaca;
  line-height: 0.42rem;
  i {
    float: left;
    font-size: 0.16rem;
    width: 0.3rem;
    text-align: center;
    font-weight: 700
  }
  h2 {
    float: left;
    width:80%;
    text-align: center;
    font-size: 0.16rem;
    font-weight: 500;
  }
}
.friend-content {
  @include rect(100%, 100%);
  overflow: auto;
  color: rgb(43, 43, 43);
  .dad, .mom{
    float: left;
    margin-top: 0.35rem;
    @include flexbox();
    @include flex-direction(column);
    @include align-items();
    width: 50%;
    img {
      @include rect(0.85rem, 0.85rem);
      border-radius: 50%;
      margin-bottom: 0.1rem;
      border: 1px solid #e9e8e86b;
    }
  }
  .family {
    float: left;
    width: 100%;
    ul {
      width: 80%;
      margin-left: 0.1rem;
      li {
        @include rect(1rem, 0.4rem);
        border: 1px solid #b6b6b6;
        border-radius: 0.08rem;
        line-height: 0.4rem;
        float: left;
        margin-left: 0.5rem;
        margin-top: 0.2rem;
        text-align: center;
        font-size: 0.14rem;
      }
    }
  }
}
</style>
